<template>
  <van-row style="margin-bottom: 3rem;">
    <van-col>
      <div id="mse"></div>
    </van-col>
    <van-row v-if="playData.id">
      <van-cell :title="playData.name" :value="playData.note"></van-cell>
      <van-cell>
        <van-tag style="margin: 6px;" plain type="primary" size="medium" v-for="item in playData.dd"
                 @click="next(item)">{{ item.content }}
        </van-tag>
      </van-cell>
    </van-row>
    <van-row v-if="playData.id">
      <van-cell-group inset>
        <van-cell title="导演" v-if="playData.director" :value="playData.director"></van-cell>
        <van-cell title="主演" v-if="playData.actor" :label="playData.actor"></van-cell>
        <van-cell title="简介" v-if="playData.des" :label="playData.des"></van-cell>
      </van-cell-group>
    </van-row>
  </van-row>
</template>

<script>
module.exports = {
  props: ['playData'],
  data() {
    return {
      hlsJsPlayer: undefined,
      urlList: [],
      link: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4'
    }
  },
  mounted() {
    if (this.playData.id) {
      let dd = this.playData.dd;
      for (let i in dd) {
        this.urlList.push(dd[i].link)
      }
      this.link = dd[0].link;
    }
    this.hlsJsPlayer = new Player({
      id: 'mse',
      url: this.link,
      autoplay: true,
      playsinline: true,
      plugins: [],
      height: '16em',
      width: window.innerWidth,
      playbackRate: [2, 1.5, 1, 0.5],
      playNext: {
        urlList: this.urlList,
      }
    });
    this.playerPlugin(this.link);
  },
  watch: {
    playData: {
      handler(newValue, oldValue) {
        this.next(newValue.dd[0]);
        // console.log('对象所有属性的监听', JSON.stringify(newValue), JSON.stringify(oldValue));
      },
      deep: true
    }
  },
  methods: {
    next(item) {
      if (this.hlsJsPlayer) {
        let link = item.link;
        this.playerPlugin(link);
        this.hlsJsPlayer.src = link;
      }
    },
    playerPlugin(link) {
      console.log(link);
      let hlsJsPlayer = this.hlsJsPlayer;
      if (hlsJsPlayer) {
        let hlsInstance = hlsJsPlayer.plugins.hlsjsplugin;
        let mp4Instance = hlsJsPlayer.plugins.mp4plugin;
        if (link.includes('.m3u8')) {
          if (mp4Instance) {
            mp4Instance.__destroy();
          }
          if (!hlsInstance) {
            hlsJsPlayer.registerPlugin(HlsJsPlugin);
          }
        } else {
          if (hlsInstance) {
            hlsInstance.__destroy();
          }
          if (!mp4Instance) {
            hlsJsPlayer.registerPlugin(Mp4Plugin);
          }
        }
      }
    }
  }
}
</script>

<style scoped>
</style>